<template>
  <div>
    <div class="userCom"></div>
    <div
      style="
        background-color: white;
        width: 100px;
        height: 30px;
        margin-left: 40px;
        margin-top: -40px;
      "
    >
      <h3 style="display: flex; float: left; margin-top: -6px; margin-left: 20px">用户评论</h3>
    </div>
    <div style="height: 50px; width: 50px; margin-left: 80px; margin-top: 10px">
      <el-image
        :src="heads"
        style="border-radius: 50%; overflow: hidden"
        class="image"
        width="100%"
        height="100%"
      />
    </div>
    <div
      style="
        width: 400px;
        height: 80px;
        background-color: white;
        margin-left: 150px;
        margin-top: -50px;
      "
    >
      <el-input
        style="height: 300px"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div style="margin-top: -45px; display: flex; margin-left: 600px">
      <el-button type="primary" style="margin-right: -350px" @click="addCom">发表评论</el-button>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import router from '../../router/index.js';
const heads = ref();
const movie = ref('');
const form = reactive({
  uid: '',
  mid: '',
  desn: '',
});
const textarea = ref('');
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'));
  const uid = JSON.parse(sessionStorage.getItem('uid'));
  if (uid === null) {
    router.push('/');
  } else {
    axios.get('/api/movie/getMovieByMname/' + movieName).then(res => {
      if (res.data !== null) {
        movie.value = res.data;
      } else {
        ElMessage({
          showClose: true,
          message: '网络错误！',
          type: 'error',
        });
      }
    });

    const userHeadsrc = JSON.parse(sessionStorage.getItem('headSrc'));
    heads.value = require('../../assets/' + userHeadsrc);
  }
});

const addCom = () => {
  form.uid = JSON.parse(sessionStorage.getItem('uid'));
  form.mid = movie.value[0].mid;
  form.desn = textarea.value;
  axios.post('/api/comment/addComment', form).then(res => {
    if (res.data != null) {
      ElMessage({
        showClose: true,
        message: '评论成功！',
        type: 'success',
      });
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error',
      });
    }
  });
  textarea.value = '';
};
</script>
<style lang="scss" scoped>
.userCom {
  background-color: burlywood;
  width: 20px;
  height: 50px;
  margin-left: 20px;
  margin-top: -12px;
}
</style>
